<!DOCTYPE html>
<html lang="en">
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
      name="viewport">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="UTF-8">
<title>集团意向new</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/dist/css/oa-app.css">
<head>

</head>
<style>
    .boxBoy {
        background: #fff;
        margin-top: 55px;
    }

    .lineOne, .lineTwo {
        text-align: left;
    }

    .lineOne span {
        max-height: 24px;
        line-height: 24px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        text-align: left;
    }

    .div-td-content-more {
        position: absolute;
        height: auto;
        z-index: 999;
        line-height: 20px;
        background-color: #d3e8fd;
        padding: 8px 6px;
        border: 1px solid #e8e8ea;
        display: none;
    }

    .div-td-content-more i {
        width: 15px;
        height: 12px;
        /* background: url("/dist/img/more-icon.png");*/
        position: absolute;
        left: 50px;
        top: -12px;
    }

    .hidden {
        display: none;
    }

    .model-picker-dropdown {
        position: absolute;
        width: 315px;
        left: -9999px;
        top: -9999px;
        outline: 0;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        z-index: 999999;
        display: none;
        min-width: 200px;
        margin-bottom: 20px;
        margin-top: 5px
    }

    .model-select-wrap {
        box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5)
    }

    .model-select-tab {
        border-bottom: 1px solid #ccc;
        background: #f5f5f5;
        font-size: 13px
    }

    .model-select-tab > a {
        display: inline-block;
        padding: 4px 20px;
        border-left: 1px solid #ccc;
        border-bottom: 1px solid transparent;
        color: #4D4D4D;
        text-align: center;
        outline: 0;
        text-decoration: none;
        cursor: pointer;
        font-size: 14px;
        margin-bottom: -1px
    }

    .model-select-tab > a.active {
        background: #fff;
        border-bottom: 1px solid #fff;
        color: #46A4FF
    }

    .model-select-tab > a:first-child {
        border-left: none
    }

    .model-select-tab > a:last-child.active {
        border-right: 1px solid #ccc
    }

    .model-select-content {
        width: 100%;
        min-height: 50px;
        background-color: #fff;
        padding: 5px 5px
    }

    .model-select {
        font-size: 12px
    }

    .model-select dl {
        line-height: 2;
        clear: both;
        padding: 3px 0;
        margin: 0;
        max-height: 200px;
        overflow-y: scroll
    }

    .model-select dt {
        position: absolute;
        width: 2.5em;
        font-weight: 500;
        text-align: right;
        line-height: 2
    }

    .model-select dd {
        margin-left: 0;
        line-height: 2
    }

    .model-select.province dd {
        margin-left: 3em
    }

    .model-select a {
        display: inline-block;
        padding: 0 10px;
        outline: 0;
        white-space: nowrap;
        margin-right: 2px;
        text-decoration: none;
        color: #333;
        cursor: pointer
    }

    .model-select a:hover, .model-select a:focus {
        background-color: #f1f8ff;
        border-radius: 2px;
        color: #46A4FF
    }

    .model-select a.active {
        background-color: #46A4FF;
        color: #fff;
        border-radius: 2px
    }
</style>
<body>
<!--<div id="app" v-cloak>
    <div class="div-td-content-more" style="z-index: 11112"><i></i></div>
    &lt;!&ndash;公司列表&ndash;&gt;
    <div class="oa-tab-scroll">
        <div class="oa-slide ">
            <div v-for="(item,i) in companyList"  :class="selectCompany==i? 'tabActive':'tabNo'" @click="selectCompany=i;changeCompany(item.id)">{{item.name}}</div>
        </div>
    </div>
    <div style="width: 100%;margin-top: 55px;">
        &lt;!&ndash;集团&ndash;&gt;
        <div v-if="companyId ==''">
            <table  class="oa-table " >
                <thead>
                <tr class="oa-table-title-gray">
                    <th style="width:20%;">公司</th>
                    <th style="width: 12%">本月内</th>
                    <th style="width:12%;">下月内</th>
                    <th style="width:12%;">三月内</th>
                    <th style="width:12%;">半年内</th>
                    <th style="width:12%;">总数</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="(item,i) in customerList">
                    &lt;!&ndash;<td :rowspan="item.departNamespan" :class="{hidden: item.departNamedis}">{{item.departName.replace('大区','')}}</td>&ndash;&gt;
                    <td><span style="color: #2a8cec;" @click="openCompany(item)">{{item.companyName}}</span>
                    </td>
                    &lt;!&ndash; style="color: #2a8cec;" @click="openDetail(item.customerId,0,'look')" class="lineOne"&ndash;&gt;
                    <td>{{item.todayMonth}}</td>
                    <td>{{item.nextMonth}}</td>
                    <td>{{item.threeMonth}}</td>
                    <td>{{item.halfYear}}</td>
                    <td>{{item.allNum}}</td>
                </tr>
                <tr>
                    <td>合计</td>
                    &lt;!&ndash;<td>{{calculation.week}}</td>
                    <td>{{calculation.month}}</td>&ndash;&gt;
                    <td>{{calculation.todayMonth}}</td>
                    <td>{{calculation.nextMonth}}</td>
                    <td>{{calculation.threeMonth}}</td>
                    <td>{{calculation.halfYear}}</td>
                    <td>{{calculation.allCount}}</td>
                </tr>
                &lt;!&ndash;<div v-if="returnFlag" :class="!all ||all.length<=0?'table-bordered':''">
                <div style="margin: 0 auto;color: #999999;text-align: center;padding: 32px;font-size: 16px;background: #fff;"
                     v-if="!all ||all.length<=0">
                    暂无意向客户
                </div>
            </div>&ndash;&gt;
                </tbody>
            </table>
        </div>
        &lt;!&ndash;全部&ndash;&gt;
        <div v-else>
            <table class="oa-table " v-else >
                <thead>
                <tr class="oa-table-title-gray">
                    <td  style="width: 12%;background-color: #f8f8f8;">大区</td>
                    <td  style="width: 14%;line-height:16px;background-color: #f8f8f8;">区域<br>经理</td>
                    <td  style="width: 14%;background-color: #f8f8f8;">客户</td>
                    <td  style="width: 15%;background-color: #f8f8f8;">意向机型</td>
                    <td  style="width: 13%;line-height:16px;background-color: #f8f8f8;">成交<br>时间</td>
                    <td  style="width: 12%;line-height:16px;background-color: #f8f8f8;">成交<br>概率</td>
                </tr>
                </thead>
                <tbody>
                <tr v-for="(item,i) in all">
                    &lt;!&ndash;  <td>{{item.regionName}}</td>&ndash;&gt;
                    <td class="shuText" :rowspan="item.regionNamespan"
                        :class="{hidden: item.regionNamedis}"><span
                            style="text-align: center;">{{item.regionName.replace(/大区/g,'')}}</span><br/>
                        <div class="oa-name" :style="item.bigRegionManagerName?'':'height:0px'">{{item.bigRegionManagerName}}</div>
                    </td>
                    <td :rowspan="item.genZRspan" :class="{hidden: item.genZRdis}">
                        <div class="oa-name">{{item.genZR}}</div>
                    </td>
                    <td style="color: #2a8cec;"
                        @click="openDetail(item.customerId,0,'look')">
                        <div class="oa-name">{{item.customerName}}</div>
                    </td>
                    <td class="lineOne"><span>{{item.intentionModel}}</span></td>
                    <td><span class="lineOne">{{item.buyDate}}</span></td>
                    <td v-if="item.chance">{{item.chance}}</td>
                    <td v-else><50%</td>
                </tr>
                </tbody>
            </table>
            <div v-if="returnFlag" :class="!all ||all.length<=0?'table-bordered':''">
                <div style="margin: 0 auto;color: #999999;text-align: center;padding: 32px;font-size: 16px;background: #fff;"
                     v-if="!all ||all.length<=0">
                    暂无意向客户
                </div>
            </div>
        </div>
    </div>


</div>-->
<div class="content" id="app" v-cloak style="padding: 0;">
    <div class="div-td-content-more"><i></i></div>

    <div class="templateStyle">

        <!--集团-->
        <div v-if="companyId ==''" style="margin-top: 55px">
            <table class="oa-table">
                <thead>
                <tr class="oa-table-title-gray">
                    <th style="width: 20%;">公司</th>
                    <th style="width: 12%;">本月内</th>
                    <th style="width: 12%;">下月内</th>
                    <th style="width: 12%;">三月内</th>
                    <th style="width: 12%;">半年内</th>
                    <th style="width: 12%;">总数</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="(item,i) in customerList">
                    <td v-if="companyIdsStr.indexOf(item.companyId)>0">
                        <span style="color: #2a8cec;" @click="openCompany(item)" >{{item.companyName}}</span>
                    </td>
                    <td v-else>
                        <span  >{{item.companyName}}</span>
                    </td>
                    <td>{{item.todayMonth}}</td>
                    <td>{{item.nextMonth}}</td>
                    <td>{{item.threeMonth}}</td>
                    <td>{{item.halfYear}}</td>
                    <td>{{item.allNum}}</td>
                </tr>
                <tr>
                    <td>合计</td>
                    <!--<td>{{calculation.week}}</td>
                    <td>{{calculation.month}}</td>-->
                    <td>{{calculation.todayMonth}}</td>
                    <td>{{calculation.nextMonth}}</td>
                    <td>{{calculation.threeMonth}}</td>
                    <td>{{calculation.halfYear}}</td>
                    <td>{{calculation.allCount}}</td>
                </tr>
                <tr v-if="returnFlag">
                    <td style="margin: 0 auto;color: #999999;text-align: center;margin-top: 100px;font-size: 22px;background: #fff;border-top: none"
                        colspan="6"
                        v-if="!customerList||customerList.length<=0">
                        暂无意向客户
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
        <!--全部-->
        <div v-else style="margin-top: 55px">
            <table class="oa-table">
                <tbody>
                <tr class="oa-table-title-gray">
                    <th style="width: 12%;">大区</th>
                    <th style="width: 14%;line-height:16px;">区域<br>经理</th>
                    <th style="width: 14%;">客户</th>
                    <th style="width: 15%;">意向机型</th>
                    <th style="width: 13%;line-height:16px;">成交<br>时间</th>
                    <th style="width: 12%;line-height:16px;">成交<br>概率</th>
                </tr>
                <tr v-for="(item,i) in all">
                    <!--  <td>{{item.regionName}}</td>-->
                    <td class="shuText" :rowspan="item.regionNamespan"
                        :class="{hidden: item.regionNamedis}"><span
                            style="text-align: center;">{{item.regionName.replace(/大区/g,'')}}</span><br/>
                        <div class="oa-name" :style="item.bigRegionManagerName?'':'height:0px'">
                            {{item.bigRegionManagerName}}
                        </div>
                    </td>
                    <td :rowspan="item.genZRspan" :class="{hidden: item.genZRdis}">
                        <div class="oa-name">{{item.genZR}}</div>
                    </td>
                    <td style="color: #2a8cec;"
                        @click="openDetail(item.customerId,0,'look')">
                        <div class="oa-name">{{item.customerName}}</div>
                    </td>
                    <td class="lineOne"><span>{{item.intentionModel}}</span></td>
                    <td><span class="lineOne">{{item.buyDate}}</span></td>
                    <td v-if="item.chance">{{item.chance}}</td>
                    <td v-else><50%</td>
                </tr>
                <tr v-if="returnFlag" :class="!all ||all.length<=0?'table-bordered':''">
                    <td style="margin: 0 auto;color: #999999;text-align: center;padding: 32px;font-size: 16px;background: #fff;border-top: none"
                        colspan="6"
                        v-if="!all ||all.length<=0">
                        暂无意向客户
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>

    <!--公司列表-->
    <div class="oa-tab-scroll">
        <div class="oa-slide ">
            <div v-for="(item,i) in companyList" :class="selectCompany==i? 'tabActive':'tabNo'"
                 @click="selectCompany=i;changeCompany(item.id)">{{item.name}}
            </div>
        </div>
    </div>

</div>
<script src="https://file.ggxqce.com/web/jquery-2.2.3.min.js"></script>
<script src="https://file.ggxqce.com/web/vue.min.js"></script>
<script src="https://file.ggxqce.com/web/axios.min.js"></script>
<script src="/dist/js/newOaApp.js"></script>
<script>
    $(function () {
        $("body").on("click", ".lineOne,.lineTwo", function (e) {
            if ($(".div-td-content-more").is(":hidden")) {
                var text = $(this).text();
                if (text != "") {
                    text = "<i></i>" + text;
                    $(".div-td-content-more").html(text).css({
                        "width": $(this).outerWidth() + "px",
                        "left": $(this).offset().left,
                        "top": ($(this).offset().top + $(this).outerHeight()) + "px"
                    }).show();
                    e.stopPropagation();
                }
            } else {
                $(".div-td-content-more").hide();
            }
        });
        $("body").on("click", ".div-td-content-more", function (e) {
            e.stopPropagation();
        });
        $("body").on("click", function () {
            $(".div-td-content-more").hide();
        });
    });
</script>
<script>
    //navigateBack回调
    function onParamReceived(param) {
        if (param) {
            app.getCompanyList();
        }
    }

</script>
<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            userId: getUrlParamObj().userId,
            companyId: getUrlParamObj().companyId,
            companyList: [],
            selectCompany: 0,
            regionId: getUrlParamObj().regionId ? getUrlParamObj().regionId : '',
            key: '',
            all: [],
            customerList: [],
            calculation: {
                "todayMonth": 0,
                "nextMonth": 0,
                "week": 0,
                "month": 0,
                "threeMonth": 0,
                "halfYear": 0,
                "allCount": 0,
            },
            returnFlag: false,
            companyIdsStr:''
        },
        methods: {
            changeBuyDate: function (buyDate) {
                var a = '';
                switch (buyDate) {
                    case 'todayMonth':
                        a = '本月内'
                        break
                    case 'nextMonth':
                        a = '下月内'
                        break
                    case 'threeMonth':
                        a = '三月内'
                        break
                    case 'halfYear':
                        a = '半年内'
                        break
                }
                return a;
            },
            changeCompany: function (id) {
                this.companyId = id
                if (id) {
                    this.getAll()
                } else {
                    this.get_customerList_group();
                }
            },
            getCompanyList: function () {
                var that = this;
                that.selectCompany = 0;
                that.showLoading()
                axios.post("/company/getCompanyListByUserIdAndRegionId.json", {
                    userId: that.userId,
                    excludeCompanyIds: '201712161613432EAF27DBCCB7D0E6CA,2017121910424ED9AA4F786D5549D72F' //排除滚滚向前和江苏瀛丰
                })
                    .then(function (data) {
                        data.splice(0, 0, {
                            id: '',
                            name: '目标'
                        })
                        that.companyList = data
                        for (var i = 0; i < that.companyList.length; i++) {
                            that.companyIdsStr+=that.companyList[i].id+',';
                            console.log(that.companyIdsStr)
                        }
                        if (that.companyList && that.companyList.length > 0) {
                            that.companyId = that.companyList[0].id
                            if (that.companyId == '') {
                                that.get_customerList_group();
                            } else {
                                that.getAll();
                            }
                        } else {
                            that.hideLoading()
                        }
                    })
            },
            getAll: function () {
                var that = this;
                that.showLoading()
                axios.post(urlConfig.intentionCustomerManagement.getIntentCustomerListForManagerByUserId, {
                    "companyId": that.companyId,
                    "userId": that.userId,
                    "buyDate": '',
                    "key": that.key
                })
                    .then(function (data) {
                        for (var i = 0; i < data.list.length; i++) {
                            for (var j = 0; j < data.report.length; j++) {
                                if ((data.report[j].regionId == data.list[i].regionId)) {
                                    data.list[i].bigRegionManagerName = data.report[j].bigRegionManagerName
                                }
                            }
                        }
                        var list = data.list
                        that.all = that.tablesMergeCell(list);
                        that.hideLoading()
                    })
            },
            get_customerList_group: function () {
                var that = this;
                that.showLoading()
                axios.post("/intentionCustomerManagement/getIntentCustomerReportForGroup.json", {
                    "userId": that.userId,
                })
                    .then(function (data) {
                        console.log(data.records)
                        that.customerList = data.records

                        //获取合计
                        /*  that.calculation.week = that.getCount(that.customerList, "weekNum");
                         that.calculation.month = that.getCount(that.customerList, "monthNum");*/
                        that.calculation.todayMonth = that.getCount(that.customerList, "todayMonth");
                        that.calculation.nextMonth = that.getCount(that.customerList, "nextMonth");
                        that.calculation.threeMonth = that.getCount(that.customerList, "threeMonth");
                        that.calculation.halfYear = that.getCount(that.customerList, "halfYear");
                        that.calculation.allCount = that.getCount(that.customerList, "allNum");
                        that.returnFlag = true;
                        that.hideLoading()
                    })
            },
            //打开公司
            openCompany: function (item) {
                var that = this;
                var param = {
                    url: '/page/intentionManagement/managerIntentionalListAppNew.html?companyId=' + item.companyId + '&userId=' + that.userId,
                }
                JSBridge.call(ROUTER, 'navigateTo', param)
                console.log(obj.url)
            },
            getCount: function (arr, key) {
                var number = 0;
                for (var i = arr.length - 1; i >= 0; i--) {
                    number += (arr[i][key] && arr[i][key] != '-' ? arr[i][key] : 0)

                }
                return number;
            },
            //打开客户详情
            openDetail: function (customerId, isAdd, pageType) {
                var isRegion = ''
                if (this.isSelf == 1) {
                    pageType = "edit"
                    isRegion = 1
                }
                var that = this;
                var param = {
                    url: '/page/intentionManagement/quYuIntentionalDetailApp.html?customerId=' + customerId + '&isAdd=' + isAdd + '&pageType=' + pageType + '&userId=' + that.userId + '&companyId=' + that.companyId + '&isRegion=' + isRegion + '&isSelf=' + that.isSelf + '&newPager=1',
                }
                JSBridge.call(ROUTER, 'navigateTo', param)
            },
            //合并单元格
            tablesMergeCell: function (list) {
                for (field in list[0]) {
                    var k = 0;
                    while (k < list.length) {
                        list[k][field + 'span'] = 1;
                        list[k][field + 'dis'] = false;
                        for (var i = k + 1; i <= list.length - 1; i++) {
                            if (list[k][field] == list[i][field] && list[k][field] != '') {
                                if (field == 'regionId') {
                                    if (list[k].regionId == list[i].regionId) {
                                        list[k][field + 'span']++;
                                        list[k][field + 'dis'] = false;
                                        list[i][field + 'span'] = 1;
                                        list[i][field + 'dis'] = true;
                                    }
                                } else {
                                    list[k][field + 'span']++;
                                    list[k][field + 'dis'] = false;
                                    list[i][field + 'span'] = 1;
                                    list[i][field + 'dis'] = true;
                                }
                            } else {
                                break;
                            }
                        }
                        k = i;
                    }
                }
                return list;
            },
            showLoading: function () {
                var that = this
                var param = {
                    cancelable: false
                }
                JSBridge.call(UI, 'showLoading', param)


            },
            hideLoading: function () {
                JSBridge.call(UI, 'hideLoading')
            },
            setPullRefresh: function (isOpen) {
                var param = {
                    pullRefresh: isOpen, //是否开启原生下拉刷新
                }
                JSBridge.call(UI, 'setPullRefresh', param)
            }
        },
        mounted: function () {
            var that = this;
            that.setPullRefresh(true)
            that.getCompanyList()
        }
    })
</script>
<script>
    var isTop = true
    $(window).scroll(function () {
        //为了保证兼容性，这里取两个值，哪个有值取哪一个,scrollTop就是触发滚轮事件时滚轮的高度
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        if (scrollTop === 0) {
            isTop = true
            setScrollTop(true) //到达顶部
        } else if (scrollTop > 0 && isTop) {
            isTop = false
            setScrollTop(false) //非顶部
        }
    })
    function setScrollTop(isScrollTop) {
        var param = {
            isScrollTop: isScrollTop
        }
        JSBridge.call(UI, 'setScrollTop', param)
    }

</script>
</body>
</html>